<template>
  <div class="labor">
    <!-- 面包屑导航栏 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/manage' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>工资系统</el-breadcrumb-item>
      <el-breadcrumb-item>劳动合同</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索劳动合同 -->
    <el-row :gutter="20">
      <el-col :span="7">
        <el-input placeholder="请输入员工名称" v-model="laborInfo.username" clearable></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="getLaborList">搜索</el-button>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addDialogVisible=true">添加合同</el-button>
      </el-col>
    </el-row>

    <!-- 卡片 劳动合同列表 -->
    <el-card>
      <!-- 劳动合同表格 -->
      <el-table :data="laborList" border stripe>
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column prop="effectiveDate" label="生效日期" width="180"></el-table-column>
        <el-table-column prop="expirationDate" label="失效日期"></el-table-column>
        <el-table-column prop="img" label="照片"></el-table-column>
        <el-table-column prop="staffId" label="人员编号"></el-table-column>
        <el-table-column prop="number" label="合同编号" width="150"></el-table-column>
        <el-table-column prop="insertTime" label="新增时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="editLabor(scope.row)"
            >修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="laborSizeChange"
        @current-change="laborCurrentChange"
        :current-page="laborInfo.begin"
        :page-size="laborInfo.length"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 添加合同弹出框 -->
    <el-dialog title="添加劳动合同" :visible.sync="addDialogVisible" width="50%">
      <!-- 添加劳动合同表单 -->
      <el-form :model="laborForm" :rules="laborFormRules" ref="laborFormRef" label-width="80px">
        <el-form-item label="编号" prop="id">
          <el-input v-model="laborForm.id"></el-input>
        </el-form-item>
        <el-form-item label="生效日期" prop="effective_date">
          <el-input v-model="laborForm.effective_date"></el-input>
        </el-form-item>
        <el-form-item label="失效日期" prop="expiration_date">
          <el-input v-model="laborForm.expiration_date"></el-input>
        </el-form-item>
        <el-form-item label="合同图片" prop="img">
          <el-input v-model="laborForm.img"></el-input>
        </el-form-item>
        <el-form-item label="人员编号" prop="staffId">
          <el-input v-model="laborForm.staffId"></el-input>
        </el-form-item>
        <el-form-item label="新建时间" prop="insterTime">
          <el-input v-model="laborForm.insterTime"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改劳动合同弹出框 -->
    <el-dialog title="修改劳动合同" :visible.sync="editDialogVisible" width="50%">
      <!-- 添加劳动合同表单 -->
      <el-form
        :model="editLaborForm"
        :rules="laborFormRules"
        ref="editLaborFormRef"
        label-width="80px"
      >
        <el-form-item label="编号" prop="id">
          <el-input v-model="editLaborForm.id"></el-input>
        </el-form-item>
        <el-form-item label="生效日期" prop="effective_date">
          <el-input v-model="editLaborForm.effective_date"></el-input>
        </el-form-item>
        <el-form-item label="失效日期" prop="expiration_date">
          <el-input v-model="editLaborForm.expiration_date"></el-input>
        </el-form-item>
        <el-form-item label="合同图片" prop="img">
          <el-input v-model="editLaborForm.img"></el-input>
        </el-form-item>
        <el-form-item label="人员编号" prop="staffId">
          <el-input v-model="editLaborForm.staffId"></el-input>
        </el-form-item>
        <el-form-item label="新建时间" prop="insterTime">
          <el-input v-model="editLaborForm.insterTime"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getLaborList } from "../api/common";
export default {
  name: "labor",
  data() {
    return {
      //  劳动合同列表
      laborList: [],
      // 合同总条数
      total: 0,
      //   控制添加劳动合同弹出框
      addDialogVisible: false,

      // 添加劳动合同信息表单数据
      laborInfo: {
        //   模糊查询条件
        username: "",
        //  开始页码
        begin: 1,
        //   每页长度
        length: 15
      },

      laborForm: {
        id: 0, // 编号
        effectiveDate: "", // 生效日期
        expirationDate: "", //失效日期
        img: "", //图片,
        staffId: 0, // 人员编号
        number: 0, // 劳动合同编号
        insertTime: "" //新增时间
      },
      //   添加劳动合同规则
      laborFormRules: {
        id: [{ required: true, message: "请输入编号", trigger: "blur" }],
        effective_date: [
          { required: true, message: "请选择生效日期", trigger: "blur" }
        ],
        expiration_date: [
          { required: true, message: "请选择失效", trigger: "blur" }
        ],
        img: [{ required: true, message: "请输入人员编号", trigger: "blur" }],
        staffId: [
          { required: true, message: "请输入人员编号", trigger: "blur" }
        ],
        insterTime: [
          { required: true, message: "请选择新建时间", trigger: "blur" }
        ]
      },
      // 修改劳动合同
      editDialogVisible: false,
      // 个人劳动合同信息
      editLaborForm: []
    };
  },
  created() {
    this.getLaborList();
  },
  methods: {
    //   获取劳动合同列表
    getLaborList() {
      getLaborList(this.laborInfo).then(res => {
        this.laborList = res.data.page.data;
        this.total = res.data.page.total;
      });
    },
    // 最新页面长度
    laborSizeChange(newSize) {
      console.log( newSize);
      this.laborInfo.length = newSize;
      this.getLaborList();
    },
    // 最新页面页数
    laborCurrentChange(newPage) {
      console.log(newPage);
      this.laborInfo.begin = newPage;
      this.getLaborList();
    },
    // 修改劳动合同
    editLabor(userInfo) {
      console.log(userInfo)
      this.editDialogVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
.labor {
  padding: 20px;
}
.el-card {
  margin-top: 15px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.1) !important;
}

.el-col {
  margin-top: 15px;
}

.el-pagination {
  margin-top: 15px;
}
</style>
